<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-30 11:43:55
 * @LastEditTime: 2023-06-28 16:56:01
-->
<script lang="ts" setup name="ConditionNodeConfig">
import { computed, ref } from 'vue'

import { Plus } from '@element-plus/icons-vue'
import GroupItem from './ConditionGroupItemConfig.vue'

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const showOrgSelect = ref(false)

const flowStore = useFlowStore()
const selectedNode = computed(() => flowStore.selectedNode)
const selectOrder = ref(selectedNode.value.conditionOrder)
const cselected = computed(() => props.config.assignedUser || [])
const prioritySortList = computed(() => {
  const node = flowStore.nodeMap.get(selectedNode.value.parentId)
  if (node) {
    const list = node.branchs || node?.value?.branchs || []
    return list.filter((item: any) => item.name !== '系统默认条件')
  }

  return []
})
// const nowNodeLeave = computed(() =>
//   prioritySortList.value.indexOf(selectedNode.value)
// )

const addConditionGroup = () => {
  props.config.groups.push({
    // 所属工作流节点编号
    nodeId: '',
    // 所属工作流节点标识
    nodeCode: '',
    // 所属工作流条件编号
    conditionId: '',
    // 工作流分支节点条件比较式字段名称
    widgetName: '',
    // 工作流分支节点条件比较式字段名称（显示）
    widgetDescription: '',
    cids: [],
    conditions: [],
    // 工作流分支节点条件比较式运算符,可用值EComparatorType
    comparator: 'OR',
    // 工作流分支节点条件比较式字段值
    compareToValues: '',
    // 工作流分支节点条件比较式运算符名称
    comparatorName: '',
    // 日期格式
    datePattern: ''
  })
}

const selectUser = () => {
  showOrgSelect.value = true
}
const selected = (select: any[]) => {
  showOrgSelect.value = false
  select.forEach(val => cselected.value.push(val))
}
const removeOrgItem = (index: number) => {
  cselected.value.splice(index, 1)
}

// watch(
//   () => selectedNode.value,
//   { deep: true }
// )
const swapElementsByCondition = (array: any[], conditionOrder1: number, conditionOrder2: number) => {
  // 找到具有给定 conditionOrder 值的两个元素的下标
  const index1 = array.findIndex(obj => obj.conditionOrder === conditionOrder1)
  const index2 = array.findIndex(obj => obj.conditionOrder === conditionOrder2)
  try {
    array[index1].conditionOrder = conditionOrder2
    array[index2].conditionOrder = conditionOrder1
  }
  catch (error) {

  }
  // 检查下标是否有效
  if (index1 === -1 || index2 === -1)
    return
  // 交换元素位置
  [array[index1], array[index2]] = [array[index2], array[index1]]
}

const handOrderChange = (val: number) => {
  if (val === selectedNode.value.conditionOrder)
    return

  const node = flowStore.nodeMap.get(selectedNode.value.parentId)
  swapElementsByCondition(node.branchs, selectedNode.value.conditionOrder, selectOrder.value)
  flowStore.nodeMap.set(selectedNode.value.parentId, node)
}

defineExpose([selectUser, selected, removeOrgItem])
</script>

<template>
  <el-form>
    <el-form-item label="优先级" prop="conditionOrder">
      <el-select v-model="selectOrder" placeholder="选择优先级" @change="handOrderChange">
        <el-option
          v-for="(item, index) in prioritySortList"
          :key="item.id"
          :label="`优先级${index + 1}`"
          :value="index + 1"
        />
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="条件组关系">
      <el-switch v-model="config.groupsType" active-color="#409EFF" inactive-color="#c1c1c1" active-value="AND"
        inactive-value="OR" active-text="且" inactive-text="或">
      </el-switch>
    </el-form-item> -->
    <!-- <el-form-item label="条件组表达式">
      <el-input size="small" v-model="config.expression" placeholder="输入条件组关系表达式  &为与，|为或" />
      <span class="item-desc">使用表达式构建复杂逻辑，例如: (A & B) | C</span>
    </el-form-item> -->
  </el-form>
  <GroupItem />
  <div>
    <el-button
      type="primary"
      :icon="Plus"
      style="margin: 0 15px 15px 0;"
      @click="addConditionGroup"
    >
      添加条件组
    </el-button>
    <!-- <span class="item-desc">只有必填选项才能作为审批条件</span> -->
  </div>
</template>

<style lang="scss" scoped>
.choose {
  border-radius: 5px;
  margin-top: 2px;
  background: #f4f4f4;
  border: 1px dashed #1890ff !important;
}

.drag-hover {
  color: #1890ff;
}

.drag-no-choose {
  cursor: move;
  background: #f8f8f8;
  border-radius: 5px;
  margin: 5px 0;
  height: 25px;
  line-height: 25px;
  padding: 5px 10px;
  border: 1px solid #fff;

  div {
    display: inline-block;
    font-size: small !important;
  }

  div:nth-child(2) {
    float: right !important;
  }
}
</style>
